<template>
  <div class="divisional">
    <div class="search_box" >
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in list_1" :key="index">
          <span class="inpText">{{item.name}}</span>
          <el-input v-model.trim="item.input_val" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容" style="width: 66%;"></el-input>
        </el-col>

        <el-col :span="6">
          <span class="inpText">失联原因</span>
          <el-select v-model="lost" size="small" placeholder="请选择" style="width: 66%;height: 32px;">
            <el-option v-for="item in options" :key="item.chinese" :label="item.chinese" :value="item.number" size="small"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="inpText"></span>
        </el-col>
        <el-col :span="6">
          <span class="inpText"></span>
        </el-col>
        <!-- <el-col :span="8"></el-col>
        <el-col :span="8"></el-col> -->
        <el-col :span="6" style="padding-left: 52px;">
          <el-button size="small" type="primary" @click="search" style="margin-left: 41px;">查询</el-button>
          <el-button size="small" type="primary" @click="reset">重置</el-button>
          <el-button size="small" type="primary" @click="addInfo">录入</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table :data="tableData" :header-cell-style="{background:'LightYellow	',color:'black'}" max-height="500px" style="width: 100%">
          <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
          <el-table-column prop="serialNumber" label="案件号" width></el-table-column>
          <el-table-column prop="bank" label="所属银行"></el-table-column>
          <el-table-column prop="customerId" label="客户号"></el-table-column>
          <el-table-column prop="peopleId" label="身份证号" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="name" label="姓名" width></el-table-column>
          <el-table-column prop="phoneNum" label="手机号" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="feedbackCode" label="失联原因"></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-button @click="editData(scope.row)" type="primary" size="small">编辑</el-button>
              <el-button @click="removeData(scope.row)" type="primary" size="small">出库</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pageBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15,20]"
        :page-size="pageSize"
        :total="total"

        layout="total, sizes, prev, pager, next, slot, jumper">

        </el-pagination>
    </div>

    <el-dialog :visible.sync="isAddInfo">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="案件流水号" prop="serialNumber">
          <el-input v-model="ruleForm.serialNumber"></el-input>
        </el-form-item>

        <el-form-item label="所属银行" prop="bank">
          <el-input v-model="ruleForm.bank"></el-input>
        </el-form-item>

        <el-form-item label="客户号" prop="customerId">
          <el-input v-model="ruleForm.customerId"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" prop="peopleId">
          <el-input v-model="ruleForm.peopleId"></el-input>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="phoneNum">
          <el-input v-model="ruleForm.phoneNum"></el-input>
        </el-form-item>


        <el-form-item label="失联原因" prop="feedbackCode">
          <el-select v-model="ruleForm.feedbackCode" size="small" placeholder="请选择">
            <el-option v-for="item in options" :key="item.chinese" :label="item.chinese" :value="item.number" size="small"></el-option>
          </el-select>
        </el-form-item>




        <!-- 失联原因 -->
        <!-- <div class="infoBox">
          <label>失联原因:</label>
          <el-select v-model="savelost" size="small" placeholder="请选择">
            <el-option value="">请选择</el-option>
            <el-option v-for="item in options" :key="item.chinese" :label="item.chinese" :value="item.number" size="small"></el-option>
            <el-option v-for="item in options" :key="item.chinese" :label="item.chinese" :value="item.number" size="small"></el-option>
          </el-select>
        </div> -->


        <el-form-item>
          <el-button type="primary" @click="submitSaveForm('ruleForm')">保存</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>


      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="isAddInfo = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">保存</el-button>
      </span> -->
    </el-dialog>


    <el-dialog :visible.sync="isInfodetail" width="30%">
      <span slot="title">催收方式</span>
      <div class="mainInfoBox">
        <el-radio-group v-model="radio">
          <el-radio :label="1">短信</el-radio>
          <el-radio :label="2">智能</el-radio>
          <el-radio :label="3">人工</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isInfodetail = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    Message
  } from "element-ui";
  import {
    cmcUrl
  } from "../../../static/baseUrl";
  export default {
    data() {
      /* 定义 手机号 */
      const phoneRules = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入联系方式'))
        } else {
          const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/
          if (reg.test(value)) {
            callback()
          } else {
            return callback(new Error('请输入正确的电话'))
          }
        }
      }
      const idCardValidity = (rule, code, callback) => {
        var city = {
          11: "北京",
          12: "天津",
          13: "河北",
          14: "山西",
          15: "内蒙古",
          21: "辽宁",
          22: "吉林",
          23: "黑龙江 ",
          31: "上海",
          32: "江苏",
          33: "浙江",
          34: "安徽",
          35: "福建",
          36: "江西",
          37: "山东",
          41: "河南",
          42: "湖北 ",
          43: "湖南",
          44: "广东",
          45: "广西",
          46: "海南",
          50: "重庆",
          51: "四川",
          52: "贵州",
          53: "云南",
          54: "西藏 ",
          61: "陕西",
          62: "甘肃",
          63: "青海",
          64: "宁夏",
          65: "新疆",
          71: "台湾",
          81: "香港",
          82: "澳门",
          91: "国外 "
        };
        var tip = ""
        var pass = true
        if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
          tip = "身份证号格式错误"
          pass = false;
        } else if (!city[code.substr(0, 2)]) {
          // tip = "地址编码错误"
          tip = "身份证输入错误"
          pass = false
        } else {
          // 18位身份证需要验证最后一位校验位
          if (code.length === 18) {
            code = code.split('')
            // ∑(ai×Wi)(mod 11)
            // 加权因子
            var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
            // 校验位
            var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
            var sum = 0
            var ai = 0
            var wi = 0
            for (var i = 0; i < 17; i++) {
              ai = code[i]
              wi = factor[i]
              sum += ai * wi
            }
            var last = parity[sum % 11];
            if (parity[sum % 11] != code[17]) {
              // tip = "校验位错误"
              tip = "身份证输入错误"
              pass = false
            }
          }
        }
        if (!pass) {
          callback(new Error(tip))
        } else {
          callback()
        }
      }

      /* */
      return {
        ruleForm: {},
        rules: {
          /* rules校验手机号码*/
          phoneNum: [{
            required: true,
            validator: phoneRules,
            trigger: 'blur'
          }],
          /* rules校验 身份证号*/
          peopleId: [{
              required: true,
              message: '请输入证件号',
              trigger: 'blur'
            },
            {
              pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
              message: '请输入正确的证件号'
            },
            {
              validator: idCardValidity,
              trigger: 'blur'
            }
          ],

          /* 校验*/
          serialNumber: [{
            required: true,
            message: '请输入案件流水号'
          }],
          name: [{
            required: true,
            message: '请输入姓名'
          }],
          customerId: [{
            required: true,
            message: '请输入客户号'
          }],
          bank: [{
            required: true,
            message: '请输入所属银行'
          }],
          feedbackCode: [{
            required: true,
            message: '请选择失联原因'
          }],
        },
        radio: "",
        isInfodetail: false,
        currentPage: 1,
        total: 0,
        pageSize: 10,
        list_1: [{
            name: "所属银行",
            input_val: "",
          },
          {
            name: "身份证号",
            input_val: "",
          },
          {
            name: "姓名",
            input_val: "",
          },
          {
            name: "手机号",
            input_val: "",
          },
        ],
        options: [],
        tableData: [],
        columns: [{
            name: "bank",
            text: "所属银行",
            input_val: "",
          },
          {
            name: "serialNumber",
            text: "案件号",
            input_val: "",
          },
          {
            name: "customerId",
            text: "客户号",
            input_val: "",
          },
          {
            name: "peopleId",
            text: "身份证号",
            input_val: "",
          },
          {
            name: "name",
            text: "姓名",
            input_val: "",
          },
          {
            name: "phoneNum",
            text: "手机号",
            input_val: "",
          },
        ],
        p_type: "2", //失联数据，类型定义为2
        lost: "", //失联原因 用于查询
        savelost: "", //失联原因 用于新增
        isAddInfo: false, //新增页面的状态
        isEdit: false, //是否编辑状态
        isDelete: "0",//未删除标记
      };
    },
    created() {
      this.checkInfo();
      this.getStopReason();
    },
    methods: {
      indexMethod(index) {
        index = (index + 1) + (this.currentPage - 1) * this.pageSize;
        return index
      },
      search(){
        this.currentPage = 1;
        this.checkInfo();
      },
      submitSaveForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let sUrl = "/stop/notice/add";
            if(this.isEdit){
              sUrl = "/stop/notice/update/info";
            }else{
              sUrl = "/stop/notice/add";
            }

            this.$set(this.ruleForm, "divisionMode", "2");
            this.$set(this.ruleForm, "type", this.p_type);
            this.$set(this.ruleForm, "isDelete", this.isDelete);

            this.$axios({
                method: "post",
                url: `/CMC`+sUrl,
                //headers: { 'content-type': 'application/x-www-form-urlencoded' },
                data: this.ruleForm,
              })
              .then((res) => {
                console.log(res, "保存数据");
                if (res.code == 200) {
                  Message.warning(res.message);
                  this.checkInfo();
                  this.isEdit = false;
                  this.isAddInfo = false;
                } else {
                  Message.warning(res.message);
                }
              })
              .catch((err) => {});

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      handleSizeChange(data) {
        console.log(data, "handleSizeChange");
        this.pageSize = data;
        this.checkInfo();
      },
      handleInfoDetail(val) {
        switch (val) {
          case "phoneNum":
            return "手机号";
          case "riskLecvel":
            return "风险等级";
          case "serialNumber":
            return "案件流水号";
          case "bank":
            return "所属银行";
          case "customerId":
            return "客户号";
          case "contractNum":
            return "贷款合同号";
          case "peopleId":
            return "身份证号";
          case "isFirstIssue":
            return "逾期次数";
          case "collectionTimes":
            return "催收次数";
          case "riskLevel":
            return "风险等级";
          case "overdueLevelF":
            return "逾期等级";
          case "outbound":
            return "下方方向";
          case "id":
            return "ID";
          case "receiptNum":
            return "贷款借据号";
          case "name":
            return "姓名";
          case "age":
            return "年龄";
          case "sex":
            return "性别";
          case "education":
            return "学历";
          case "maritalStatus":
            return "婚姻状况";
          case "overdueAmount":
            return "逾期金额";
          case "overdueDay":
            return "逾期天数";
          case "overduePrincipal":
            return "逾期本金";
          case "productName":
            return "产品名称";
          case "applicationTime":
            return "申请时间";
          case "lateCharge":
            return "逾期罚息";
          case "customerLabel":
            return "客群细分标签";
          case "repaymentNum":
            return "还款账号";
          case "collectionPriority":
            return "催收优先等级";
          case "interestRefund":
            return "退罚息";
          case "newAndOldLoansn":
            return "新老网贷";
          case "score":
            return "评分";
          case "state":
            return "状态";
          case "dataTime":
            return "数据时间";
          case "division":
            return "division";
          case "repaymentAmount":
            return "还款金额";
          case "repaymentDate":
            return "还款时间";
          case "scriptTemplate":
            return "话术模板";
          default:
            return val;
        }
      },
      handleClick(data) {
        console.log(data, "sss");
        this.detailInfo.splice(this.detailInfo.length);
        this.detailInfo = this.outboundOptions;
        this.isInfodetail = true;
      },
      reset() {
        this.list_1[0].input_val = "";
        this.list_1[1].input_val = "";
        this.list_1[2].input_val = "";
        this.list_1[3].input_val = "";
        this.lost = "";
      },
      //获取失联原因下拉选
      getStopReason() {
        this.$axios({
            method: "get",
            url: `/CMC/feedBack/selectList/type`,
            data: "",
          })
          .then((res) => {
            console.log(res, "查询数据");
            if (res.code == 200) {
              this.options = res.data.slFeedBack;
              console.log("this.options== ", this.options);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },
      checkInfo() {
        //   所属银行
        let bank = this.list_1[0].input_val;
        // 身份证
        let peopleId = this.list_1[1].input_val;
        // 姓名
        let name = this.list_1[2].input_val;
        // s手机号
        let phone = this.list_1[3].input_val;
        //失联原因
        let lost = this.lost;
        console.log("lost==", lost);
        // 是否逾期
        let options = {
          bank: bank,
          name: name,
          peopleId: peopleId,
          phoneNum: phone,
          feedbackCode: lost,
          isDelete: this.isDelete,
          type: this.p_type,
          page: this.currentPage,
          pageSize: this.pageSize,
        };
        this.$axios({
            method: "post",
            url: `/CMC/stop/notice/list`,
            data: options,
          })
          .then((res) => {
            console.log(res, "查询数据");
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },
      //打开人工录入的页面
      addInfo() {
        this.isAddInfo = true;
        this.resetForm("ruleForm");
      },
      //保存录入信息
      saveInfo() {
        //动态字段非空判断
        try {
          Object.keys(this.columns).forEach((item) => {
            let dataMap = this.columns[item];
            if (!dataMap.value) {
              Message.warning(dataMap.text + "必填！");
              throw new Error();
            }
          });
        } catch (e) {
          return false;
        };
        console.info("保存录入信息");
        //   停催原因
        let savelost = this.savelost;
        if (savelost == null || savelost == '') {
          Message.warning("停催原因必填！");
          return false;
        }
        //参数
        let options = {
          divisionMode: "2", //人工
          type: this.p_type,
          feedbackCode: savelost,
        };
        //设置动态字段
        Object.keys(this.columns).forEach((item) => {
          let dataMap = this.columns[item];
          console.info("dataMap=", dataMap);
          this.$set(options, dataMap.name, dataMap.value);
        });

        //let options = this.saveColumns;
        console.info("保存录入信息==", options);
        this.$axios({
            method: "post",
            url: `/CMC/stop/notice/add`,
            //headers: { 'content-type': 'application/x-www-form-urlencoded' },
            data: options,
          })
          .then((res) => {
            console.log(res, "保存数据");
            if (res.code == 200) {
              Message.warning(res.message);
              this.clearColumns();
              this.checkInfo();
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
        this.isAddInfo = false;
      },
      //清空添加页面的字段值
      clearColumns() {
        this.savelost = "";
        //this.columns.splice(this.columns.length);
        Object.keys(this.columns).forEach((item) => {
          let dataMap = this.columns[item];
          this.$set(this.columns[item], "value", '');
        });
        console.info("this.columns=", this.columns);
      },
      //出库操作（）{}
      removeData(data){
        let msg="是否删除当前数据?";
        let removeid = data.id;
        this.$confirm(msg,"提示",{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(()=>{
            this.$axios({
              method: "get",
              url: `/CMC/stop/notice/delete/batch?Ids=`+removeid,
              data: "",
            })
              .then((res) => {
                if (res.code == 200) {
                  Message.warning("出库成功！");
                  this.checkInfo();

                } else {
                  Message.warning(res.message);
                }
              })
              .catch((err) => {});
          }).catch((err) => {console.log("err",err)});
      },
      editData(data){
        this.isAddInfo = true;
        this.isEdit = true;
        this.ruleForm = JSON.parse(JSON.stringify(data));
        this.transZH_Code(this.ruleForm);
        console.log("this.ruleForm  ",this.ruleForm);
      },
      transZH_Code(data){
        if(data.hasOwnProperty("feedbackCode")){
          let ss = data.feedbackCode;
          Object.keys(this.options).forEach((item) => {
            let mmap = this.options[item];
            if(mmap.chinese==ss){
              this.$set(data, "feedbackCode", mmap.number);
            }
          })
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .divisional {
    /deep/ .el-row:nth-child(1) {
      width: 100%;
      height: 66px;
      // background: pink;
      padding: 0;
      margin: 0;

      .el-col {
        padding: 0;
        height: inherit;
        /* border: 1px solid slategrey; */
        box-sizing: border-box;
        overflow: hidden;

        div:nth-child(1) {
          width: 100%;
          height: inherit;
          //   background: yellowgreen;
          display: flex;
          flex-wrap: wrap;
          // justify-content: flex-start;
          justify-content: space-around;
          box-sizing: border-box;
          /* padding-left: 30px;
          padding-top: 40px; */
          overflow-y: auto;

          .v_box {
            width: 20%;
            height: 8vh;
            margin-left: 15px;
            margin-right: 40px;
            // margin-bottom: 10px;
            // background: chocolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: none;

            div {
              padding: 0;
            }

            &:nth-child(7) {

              .el-date-editor--daterange.el-input,
              .el-date-editor--daterange.el-input__inner,
              .el-date-editor--timerange.el-input,
              .el-date-editor--timerange.el-input__inner {
                width: 100%;
              }
            }

            &:last-child {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;

              .el-button {
                width: 70px;
                height: 30px;

                &:first-child {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }

    /deep/ .el-row:nth-child(2) {
      width: 100%;
     /* height: 60vh; */
      // background: pink;
      padding: 0;
      margin: 0;
      margin-top: 10px;

      table {
        tbody {
          tr {
            td {
              .cell {
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal !important;
                line-height: inherit;
                //   padding-right: 10px;
              }
            }
          }
        }
      }
    }

    .pageBox {
      display: flex;
      width: 100%;
      justify-content: left;
      margin-top: 10px;
    }


    /deep/ .el-dialog {
      .mainInfoBox {
        width: 100%;
        height: 60vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 30%;

          label {
            width: 100px;
          }

          .el-input {
            flex: 1 1 auto;
          }
        }
      }
    }
  }


  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 40px 40px 66px 40px;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }

  .search_box .inpText{
    width: 55px;
    justify-content: space-between;
    text-align: right;
    display: inline-block;
  }

</style>
